@import "./mixin";

.light-blue {
  @include create-theme(
    // 默认按钮背景色
    #0b7cee,
    // Button 默认按钮边框色
    #0476d3,
    // 布局背景色
    #f1f7ff,
    // 布局背景图片
    "~@/assets/themes/images/bg-light-blue.png",
    // 内容区域圆角颜色
    transparent,
    // 菜单项下边框颜色
    #5699d117,
    // 菜单项三角形颜色
    #88beeae0,
    // 菜单项三角形悬浮颜色
    rgba(255, 255, 255, 0.8),
    // 菜单项激活颜色
    #1496FF,
    // 菜单面板颜色
    #1496FF,
    // 侧边栏底部文字颜色
    #679de8e6,
    // 侧边栏底部边框颜色
    #5582df5c,
    // Top 布局菜单激活时背景颜色1
    #3193fb00,
    // Top 布局菜单激活时背景颜色2
    #0065ea,
    // Top 布局菜单下拉面板中菜单项激活时背景颜色
    #0661d8,
    // Horizontal 布局菜单项激活时的背景色
    #091fa900,
    // Horizontal 布局二级菜单栏的背景色
    #1e7fe6,
    // Horizontal 布局二级菜单项激活时的背景色
    #076cd7,
    // 顶部标题栏背景色
    #3194fa,
    // 侧边栏背景色
    #e8f4fe
  );

  .bk-layout-header .header-top-row {
    background: url("~@/assets/themes/images/topbj.png") no-repeat !important;
    background-size: 100% 100% !important;
  }

  .bg-logo-wrapper .project-name {
    // background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#e8f8fc), to(#fff)) !important;
    background-image: none !important;
    padding-bottom: 15px;
    position: relative;
    // letter-spacing: 1px !important;
    -webkit-text-fill-color: #fff !important;
    font-size: 26px !important;

    &::after {
      position: absolute;
      z-index: 5;
      left: 0;
      top: 22px;
      height: 16px;
      width: auto;
      content: "Hebei Province rainwater monitoring and forecasting service platform";
      color: #fff;
      font-size: 12px;
      font-weight: 400;
      letter-spacing: -0.2px;
    }
  }

  .bk-layout-sidebar-wrapper {
    border-right: 1px #97c7f9 solid !important;

    .el-menu-item,
    .el-submenu__title {
      color: #000 !important;

      &:hover,
      &.is-active {
        color: #fff !important;
      }
    }

    .el-menu--popup.el-menu--popup-right-start {
      .el-menu-item,
      .el-submenu__title {
        color: rgba(255, 255, 255, 0.911) !important;
      }

      .el-menu-item.is-active,
      .el-menu-item:hover,
      .el-submenu__title.is-active,
      .el-submenu__title:hover {
        color: #fff !important;
        background: #3e90e9 !important;
      }
    }

    .el-footer {
      &:hover {
        color: #3067df !important;
      }
    }

    &.left-arrow-menu:not(.collapsed) {
      .el-scrollbar__view > .el-menu {
        & > .el-submenu > ul.el-menu > li.el-menu-item {
          color: #374953 !important;
        }
      }
    }
  }

  // .vxe-modal--wrapper .vxe-modal--header,
  // .bg-col {
  //   background: linear-gradient(-90deg, #3194fa 0%, #1175ef 50%, #035ed8 100%);
  // }

  .bk-map-drawer {
    border-color: #3194fa;
  }

  .bk-map-drawer .drawer-sidebar {
    background-color: #3194fa;
  }

  .drawer-sidebar.has-menu .trigger-icon::before {
    background: #0091ff;
  }

  .drawer-sidebar.has-menu .trigger-icon:hover {
    color: #fff;
    &::before { background: #2583f2; }
  }

  .custom-menu-item {
    background: url("~@/assets/themes/images/light-menu.png") no-repeat !important;
    background-size: 100% 100% !important;

    &:hover {
      background: url("~@/assets/themes/images/light-menu-hover.png") no-repeat !important;
      background-size: 100% 100% !important;
    }
  }

  .custom-active-menu-item {
    background: url("~@/assets/themes/images/light-menu-active.png") no-repeat !important;
    background-size: 100% 100% !important;

    &:hover {
      background: url("~@/assets/themes/images/light-menu-active.png") no-repeat !important;
      background-size: 100% 100% !important;
    }
  }

  .custom-active-menu-left-item {
    background: url("~@/assets/themes/images/light-menu-left.png") no-repeat !important;
    background-size: 100% 100% !important;

    &:hover {
      background: url("~@/assets/themes/images/light-menu-active-left.png") no-repeat !important;
      background-size: 100% 100% !important;
    }
  }

  .map-op-popover-container {
    background-color: #ffffffe6;
    color: #424e61;

    .panel-header-row {
      background-color: #ffffffe6;
    }

    .mop-tool-icon {
      // background: #ffffffe6;

      &.active-tool {
        background: #028df7 !important;
      }
    }
  }

  .common-map-legend .expand-top-container,
  .common-map-legend.expand-top-mode .legend-toggle-button,
  .coordinate-box.pointer-coordinates,
  .ol-overlaycontainer-stopevent .ol-scale-line,
  .coordinate-box {
    box-shadow: 0 0 1px 0 #0357cf !important;
    background: #ffffffe6 !important;
    color: #424e61e0;
  }

  .ol-overlaycontainer-stopevent .ol-scale-line .ol-scale-line-inner {
    border: 1px solid #8d8d91;
    border-top: none;
    color: #424e61e0;
  }

  .common-map-legend.expand-left-mode,
  .common-map-legend.expand-left-icon-mode {
    background: #043d8cd6;
  }

  .map-layer-controller {
    background: #ffffffe6;
  }

  .legend-bg-black {
    background: #043d8cd6;
  }

  .el-container.layer-contrroll {
    background: #ffffffe6;
  }

  .map-box.common-layout-mode {
    background: linear-gradient(90deg, #f1f7ff, #3194fa) !important;
  }

  .bk-layout-common-wrapper .bk-layout-main-content {
    & > .full-box.bg-white,
    & > .full-box.d-flex.c-text,
    & > .bk-mutable-container.bg-white {
      position: relative;

      &::after {
        background-color: #f1f7ff;
      }
    }

    & > .full-box.bg-white {
      position: relative;

      &::after,
      &::before {
        display: none;
      }
    }
  }

  .theme-input,
  .theme-select {
    .el-input__inner {
      background: #ffffffe6;
      color: #424e61;
      border-color: #b7b9bb;
    }
  }

  .theme-popper {
    background: #ffffffe6;
    border-color: rgba(8, 34, 129, 0.7);
    color: #424e61;

    .popper__arrow {
      border-bottom-color: rgba(8, 34, 129, 0.7) !important;

      &::after {
        border-bottom-color: #ffffffe6 !important;
      }
    }

    .el-select-dropdown__item {
      color: #424e61;
    }

    .el-select-dropdown__item.hover {
      background: linear-gradient(0deg, #0091ffdb, #028df7);
      color: #fff;
    }
  }

  .theme-container {
    background: #ffffffe6;
    border-color: #b7b9bb;
    color: #424e61;
    box-shadow: 0 0 1px 0 #0357cf !important;
  }
}
